<template>
	<view class="mainV">
		<view class="logo">
			<img src="https://www.ysrs.xyz/apiI/ll/file/preview/1743073316742ff80808195d597d90195d7440f860004.jpg" alt="" />
		</view>
		<view class="title">沁水县人民医院互联网医院</view>
		<view class="login">
			<view class="loginMock" v-if="!isAgreen" @click.stop="openTip"></view>
			<button class="loginBtn " open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">一键登录</button>
		</view>
		<view class="agreen" @click.stop="isAgreen = !isAgreen">
			<view class="agreenb">
				<uv-icon v-if='isAgreen' name="checkmark" color="#2c9b94" size="22"></uv-icon>
			</view>
			<view class="agreenbt">已阅读并同意<text @click.stop="openModal(0)">《隐私政策》</text>和<text
					@click.stop="openModal(1)">《服务协议》</text>
			</view>
		</view>


		<uv-popup ref="popup" mode="center" round="6">
			<view class="content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		getUserPhone,
		miniProgramUserAdd,
	} from '@/api/common.js'

	export default {
		data() {
			return {
				isAgreen: false,
				content: ''
			}
		},
		methods: {
			openModal(type) {
				this.$refs.popup.open();
				this.content = type == 0 ? '隐私政策' : '服务协议'
			},
			openTip() {
				if (!this.isAgreen) {
					uni.showToast({
						title: '请阅读并同意《隐私政策》和《服务协议》',
						duration: 2000,
						icon: 'none'
					})
				}
			},
			onGetPhoneNumber(e) {
				const that = this
				getUserPhone({
					code: e.target.code
				}).then(res => {
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							console.log(infoRes)
							miniProgramUserAdd({
								userId: uni.getStorageSync('userInfo').id,
								phone: res.data.phoneNumber,
								avatarUrl: infoRes.userInfo.avatarUrl,
								nickName: infoRes.userInfo.nickName,
							}).then(ress => {
								uni.setStorageSync('userInfo', ress.data.result)
								uni.setTabBarBadge({ //显示数字
									index: 2, //tabbar下标
									text: '16' //数字
								})
								uni.navigateBack()
							})
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainV {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #f5f5f5;

		.logo {
			width: 240rpx;
			height: 240rpx;
			border-radius: 50%;
			overflow: hidden;
			margin: -10vh 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;

			img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.title {
			font-size: 43rpx;
			font-weight: bold;
		}

		.login {
			width: 660rpx;
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 92rpx;

			.loginMock {
				position: absolute;
				top: 0%;
				left: 0%;
				width: 660rpx;
				height: 92rpx;
				background-color: #88888888;
				border-radius: 12rpx;
				z-index: 99;
			}

			.loginBtn {
				background-color: #2c9b94;
				color: #fff;
				width: 660rpx;
				height: 92rpx;
			}

		}

		.agreen {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.agreenb {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				border: 1px solid #ccc;
				border-radius: 6rpx;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			.agreenbt {

				text {
					color: #409EFF;
				}
			}
		}
	}

	.content {
		max-height: 70vh;
		overflow-y: auto;
		padding: 20rpx;
		box-shadow: 0 0 12rpx #ccc;
	}
</style>